<template>
  <div>
    <!-- 联系人卡片 -->
    <van-contact-card
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />

    <!-- 联系人列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-contact-list
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </van-popup>

    <!-- 联系人编辑 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-contact-edit
        :tel-validator="()=>true"
        :contact-info="editingContact"
        :is-edit="isEdit"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>


  import { ContactCard, ContactList, ContactEdit ,Popup} from 'vant';
  export default {
    name:"HelloWorld",
    data() {
      return {
        chosenContactId: null, //确定当前选中的联系人的id
        editingContact: {}, //回显编辑页的联系人信息
        showList: false,//联系人列表是否顯示
        showEdit: false,//联系人编辑是否顯示
        isEdit: false,//控制编辑页的删除按钮是否显示
        list: [{
          name: '张三',
          tel: '13000000000',
          id: 0
        }]//联系人列表页使用的联系人信息
      };
    },
    computed: {
      //代表的是卡片的类型 : add / edit
      //cardType依赖于chosenContactId
      cardType() {
        return this.chosenContactId !== null ? 'edit' : 'add';
      },

      //代表联系人卡片处于编辑状态时 需要回显的联系人
      //依赖于chosenContactId & list
      currentContact() {
        const id = this.chosenContactId;
        return id !== null ? this.list.filter(item => item.id === id)[0] : {};
      }
    },
    methods: {
      // 点击联系人列表页的 添加联系人 按钮时触发
      onAdd() {
        //为新增准备id
        this.editingContact = { id: this.list.length };
        //编辑页的删除按钮不显示
        this.isEdit = false;
        //显示编辑页
        this.showEdit = true;
      },

      // 点击联系人列表页的 修改按钮 时触发
      onEdit(item) {
        //显示编辑页的删除按钮
        this.isEdit = true;
        //显示编辑页
        this.showEdit = true;
        //在编辑页回显当前编辑的联系人信息
        this.editingContact = item;
      },

      // 保存联系人(新增逻辑)
      onSave(info) {
        //info:当前编辑页中表单信息(带id)

        //隐藏编辑页和列表页
        this.showEdit = false;
        this.showList = false;


        if (this.isEdit) {
          //修改逻辑
          this.list = this.list.map(item => item.id === info.id ? info : item);
        } else {
          //新增逻辑
          this.list.push(info);
        }

        //新增的那个联系人 变为选中的联系人
        this.chosenContactId = info.id;
      },

      // 删除联系人
      onDelete(info) {
        //隐藏编辑页
        this.showEdit = false;
        //将删除那一条联系人信息直接过滤掉!
        this.list = this.list.filter(item => item.id !== info.id);
        //如果删除的是选中的那一条 chosenContactId置为null
        if (this.chosenContactId === info.id) {
          this.chosenContactId = null;
        }
      },

      // 选中联系人
      onSelect() {
        //关闭列表页
        this.showList = false;
      }
    },
    components:{
      [ContactCard.name]:ContactCard,
      [ContactList.name]:ContactList,
      [ContactEdit.name]:ContactEdit,
      [Popup.name]:Popup
    }
  };
</script>

<style scoped>

</style>
